<template>
  <view class="job-category-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <text class="iconfont-v2 icon-jiantou back-btn" @click="goBack"></text>
        <text class="nav-title">职位分类</text>
        <view class="header-actions">
          <text class="iconfont-v2 icon-gengduo more-btn"></text>
          <text class="iconfont-v2 icon-yanjing view-btn"></text>
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-container">
      <view class="search-box">
        <text class="iconfont-v2 icon-sousuo search-icon"></text>
        <input 
          class="search-input" 
          v-model="searchKeyword" 
          placeholder="请输入关键字"
          @input="onSearchInput"
        />
      </view>
      <view class="search-btn" @click="performSearch">
        <text>搜索</text>
      </view>
    </view>

    <!-- 分类内容 -->
    <view class="category-container">
      <!-- 左侧主分类 -->
      <view class="main-categories">
        <view 
          class="main-category-item" 
          v-for="(category, index) in mainCategories" 
          :key="index"
          :class="{ active: selectedMainCategory === index }"
          @click="selectMainCategory(index)"
        >
          <text>{{ category.name }}</text>
        </view>
      </view>

      <!-- 右侧子分类 -->
      <view class="sub-categories">
        <view 
          class="sub-category-item" 
          v-for="(subCategory, index) in currentSubCategories" 
          :key="index"
          @click="selectSubCategory(subCategory)"
        >
          <text>{{ subCategory.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      selectedMainCategory: 0,
      mainCategories: [
        { name: '餐饮服务' },
        { name: '专升本' },
        { name: '考研辅导' },
        { name: '教育培训' },
        { name: '销售推广' },
        { name: '客服服务' },
        { name: '物流配送' },
        { name: '家政服务' }
      ],
      subCategories: {
        0: [ // 餐饮服务
          { name: '收银员' },
          { name: '厨师' },
          { name: '服务员' },
          { name: '见习经理' },
          { name: '店长助理' },
          { name: '清洁工' }
        ],
        1: [ // 专升本
          { name: '数学辅导' },
          { name: '英语辅导' },
          { name: '专业课辅导' },
          { name: '考试指导' }
        ],
        2: [ // 考研辅导
          { name: '政治辅导' },
          { name: '英语辅导' },
          { name: '数学辅导' },
          { name: '专业课辅导' }
        ],
        3: [ // 教育培训
          { name: '小学教师' },
          { name: '中学教师' },
          { name: '培训师' },
          { name: '课程顾问' }
        ],
        4: [ // 销售推广
          { name: '销售代表' },
          { name: '市场推广' },
          { name: '客户经理' },
          { name: '业务员' }
        ],
        5: [ // 客服服务
          { name: '电话客服' },
          { name: '在线客服' },
          { name: '客服主管' },
          { name: '投诉处理' }
        ],
        6: [ // 物流配送
          { name: '快递员' },
          { name: '配送员' },
          { name: '仓库管理员' },
          { name: '司机' }
        ],
        7: [ // 家政服务
          { name: '保姆' },
          { name: '月嫂' },
          { name: '保洁员' },
          { name: '护工' }
        ]
      }
    }
  },
  computed: {
    currentSubCategories() {
      return this.subCategories[this.selectedMainCategory] || [];
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectMainCategory(index) {
      this.selectedMainCategory = index;
    },
    selectSubCategory(subCategory) {
      uni.showToast({
        title: `已选择：${subCategory.name}`,
        icon: 'success'
      });
      // 可以在这里处理选择逻辑，比如返回上一页并传递选中的分类
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
    onSearchInput(e) {
      this.searchKeyword = e.detail.value;
    },
    performSearch() {
      if (!this.searchKeyword.trim()) {
        uni.showToast({
          title: '请输入搜索关键字',
          icon: 'none'
        });
        return;
      }
      
      uni.showToast({
        title: `搜索：${this.searchKeyword}`,
        icon: 'success'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.job-category-page {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 顶部导航栏 */
.header-nav {
  background: white;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  border-bottom: 2rpx solid #f0f0f0;
  
  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .back-btn {
      font-size: 32rpx;
      color: #333;
      cursor: pointer;
    }
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .more-btn,
      .view-btn {
        font-size: 32rpx;
        color: #666;
        cursor: pointer;
        
        &:hover {
          color: #333;
        }
      }
    }
  }
}

/* 搜索栏 */
.search-container {
  background: white;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 24rpx;
    padding: 16rpx 20rpx;
    
    .search-icon {
      font-size: 28rpx;
      color: #999;
      margin-right: 12rpx;
    }
    
    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      background: transparent;
      border: none;
      
      &::placeholder {
        color: #999;
      }
    }
  }
  
  .search-btn {
    background: #ED6567;
    color: white;
    padding: 16rpx 24rpx;
    border-radius: 24rpx;
    font-size: 28rpx;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: #d55a54;
    }
  }
}

/* 分类容器 */
.category-container {
  display: flex;
  background: white;
  margin: 20rpx 30rpx;
  border-radius: 24rpx;
  overflow: hidden;
  min-height: 600rpx;
  
  /* 左侧主分类 */
  .main-categories {
    width: 200rpx;
    background: #f8f9fa;
    border-right: 2rpx solid #f0f0f0;
    
    .main-category-item {
      padding: 24rpx 20rpx;
      font-size: 26rpx;
      color: #666;
      cursor: pointer;
      transition: all 0.3s ease;
      border-bottom: 2rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.active {
        background: white;
        color: #ED6567;
        font-weight: 600;
        border-right: 4rpx solid #ED6567;
      }
      
      &:hover:not(.active) {
        background: #e9ecef;
      }
    }
  }
  
  /* 右侧子分类 */
  .sub-categories {
    flex: 1;
    padding: 20rpx;
    
    .sub-category-item {
      padding: 20rpx 0;
      font-size: 28rpx;
      color: #333;
      cursor: pointer;
      transition: all 0.3s ease;
      border-bottom: 2rpx solid #f8f9fa;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:hover {
        color: #ED6567;
        background: #f8f9fa;
        padding-left: 12rpx;
      }
    }
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .search-container {
    padding: 20rpx 24rpx;
  }
  
  .category-container {
    margin: 20rpx 24rpx;
    
    .main-categories {
      width: 180rpx;
      
      .main-category-item {
        padding: 20rpx 16rpx;
        font-size: 24rpx;
      }
    }
    
    .sub-categories {
      padding: 16rpx;
      
      .sub-category-item {
        padding: 16rpx 0;
        font-size: 26rpx;
      }
    }
  }
}
</style>

